<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
</head>
<style>
    
</style>
<body>
    <!-- 在原有作业基础上,使用list遍历商品,每个商品初始为100个商品数量，给个input输入，
        输入1 对应的商品数据要 -1，如果剩余数量为0，不展示 -->
    <ul>
        <li v-for="item,index in goods">
            <div v-if="(item.totalNum-item.buyNum)>0">
                <div>{{item.name}}-----{{item.price}}</div>
                <div>库存----------{{Number(item.totalNum)-Number(item.buyNum)}}</div>
                
                <img width="200" height="200" :src="item.img" alt="">
                <div>购买<input v-model="item.buyNum"></div>
            </div>

        </li>
    </ul>
</body>
<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
<script>
    Vue.createApp({
        data:function(){
            return{
                goods:[
                    {name:'辣条',price:2,totalNum:100,buyNum:0,img:'https://cdn.178hui.com/upload/1920/2022/0908/08321891379.jpg'},
                    {name:'蛋糕',price:34,totalNum:100,buyNum:0,img:'https://img2.baidu.com/it/u=267566466,1793978152&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889'}
                    
                ]
            }
        }
    }).mount("body");
</script>
</html>